<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>
      imo.im Notifier - Options
    </title>
    <style type="text/css">
      body { font-family: helvetica, arial, sans-serif; font-size: 80%; margin:
      10px; } #header { padding-bottom: 1.5em; padding-top: 1.5em; } #header
      h1 { font-size: 156%; display: inline; padding-bottom: 43px; padding-left:
      75px; padding-top: 40px; background: url(images/i_128x128.png) no-repeat;
      background-size: 67px; background-position: 1px 18px; } .warning { color:
      #e32; display: none; } .unstable { color: #e32; font-size: 0.85em; } #footer
      { margin-top: 2em; }
    </style>
  </head>
  
  <body>
    <div id="header">
      <h1>
        imo.im Notifier
      </h1>
    </div>
    <p>
      <label>
        <input type="checkbox" id="audio-notifications" onchange="markDirty()">
        Enable sound alert for new messages.
      </label>
    </p>
    <div id="notificationWarning" class="warning">
      Your browser doesn't support web notifications, please update to the latest
      version.
    </div>
    <p>
      <label>
        <input type="checkbox" id="message-notifications" onchange="markDirty()">
        Enable preview of new messages.
      </label>
      <br>
      <span class="unstable">
        Please disable notifications if your notifier crashes, as some versions
        of Chrome might have problems.
      </span>
    </p>
    <p>
      Preview messages for
      <input type="text" id="notification-timeout" oninput="markDirty()" value="3">
      seconds.
    </p>
    <div id="footer">
      <button id="save-button" style="font-weight:bold" onclick="save()">
        Save
      </button>
      <button onclick="init()">
        Cancel
      </button>
    </div>
    <script type="text/javascript">
      var audioNotificationsCheckbox;
      var messageNotificationsCheckbox;
      var notificationTimeoutTextbox;
      var saveButton;

      init();

      function init() {
        audioNotificationsCheckbox = document.getElementById("audio-notifications");
        messageNotificationsCheckbox = document.getElementById("message-notifications");
        notificationTimeoutTextbox = document.getElementById("notification-timeout");
        saveButton = document.getElementById("save-button");

        load();

        if (typeof webkitNotifications == undefined) {
          document.getElementById("notificationWarning").style.display = "block";
        }
      }

      function load() {
        audioNotificationsCheckbox.checked = (localStorage.enableAudioNotifications == "true");
        messageNotificationsCheckbox.checked = (localStorage.enableMessageNotifications == "true");
        notificationTimeoutTextbox.value = localStorage.notificationTimeout || "3";
        markClean();
      }

      function save() {
        localStorage.enableAudioNotifications = audioNotificationsCheckbox.checked;
        localStorage.enableMessageNotifications = messageNotificationsCheckbox.checked;
        localStorage.notificationTimeout = notificationTimeoutTextbox.value;

        markClean();

        if (messageNotificationsCheckbox.checked) {
          requestUserPermission();
        }

        chrome.extension.getBackgroundPage().readConfig();
      }

      function markDirty() {
        saveButton.disabled = false;
      }

      function markClean() {
        saveButton.disabled = true;
      }

      function requestUserPermission() {
        if (checkUserPermission()) return;

        if (typeof webkitNotifications != undefined) {
          webkitNotifications.requestPermission(function() {
            var permissionGranted = checkUserPermission();
            messageNotificationsCheckbox.checked = (messageNotificationsCheckbox.checked && permissionGranted);
            localStorage.enableMessageNotifications = messageNotificationsCheckbox.checked;
            load();
          });
        }
      }

      function checkUserPermission() {
        return (webkitNotifications.checkPermission() == 0);
      }
    </script>
  </body>

</html>